<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>头部导航栏布局</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="outer">
      <!-- 侧边栏 -->
      <div class="toolBar">
        <!-- 侧边栏的内容 -->
        <div class="content"></div>
        <!-- 面包屑 -->
        <div class="menu"></div>
        <!-- 中间导航区域 -->
        <ul class="navList">
          <li>
            <i></i>
            <p>商品会员</p>
          </li>
          <li>
            <i></i>
            <p>购物车</p>
          </li>
          <li>
            <i></i>
            <p>我的关注</p>
          </li>
          <li>
            <i></i>
            <p>我的足迹</p>
          </li>
          <li>
            <i></i>
            <p>我的消息</p>
          </li>
          <li>
            <i></i>
            <p>红浪漫来了</p>
          </li>
        </ul>
        <!-- 回到顶部 -->
        <div class="back"></div>
      </div>
      <!-- 头部区域 -->
      <header class="header">
        <div class="headerTop_out">
          <div class="headerTop">
            <div class="headerTop_left">
              <p>尚品汇欢迎您</p>
              <p>
                请
                <a href="javascript:;">登录</a>
                <a href="javascript:;">免费注册</a>
              </p>
            </div>
            <div class="headerTop_right">
              <a href="javascript:;">我的订单</a>
              <a href="javascript:;">我的购物车</a>
              <a href="javascript:;">我的尚品汇</a>
              <a href="javascript:;">尚品汇会员</a>
              <a href="javascript:;">企业采购</a>
              <a href="javascript:;">关注尚品汇</a>
              <a href="javascript:;">合作招聘</a>
              <a href="javascript:;">商家后台</a>
            </div>
          </div>
        </div>
        <div class="headerBottom">
          <h1 class="logo">
            <a href="javascript:;">
              <img src="./images/Logo.png" alt="" />
            </a>
          </h1>
          <div class="header_search">
            <input type="text" />
            <button>搜索</button>
          </div>
        </div>
      </header>
      <div class="allnav_outer">
        <div class="allnav">
          <h2>所有商品分类</h2>
          <nav>
            <a href="javascript:;">服装城</a>
            <a href="javascript:;">美妆馆</a>
            <a href="javascript:;">尚品汇超市</a>
            <a href="javascript:;">全球购</a>
            <a href="javascript:;">闪购</a>
            <a href="javascript:;">团购</a>
            <a href="javascript:;">有趣</a>
            <a href="javascript:;">秒杀</a>
          </nav>
        </div>
      </div>
      <section class="con">
        <div class="conPoint">
          <a href="javascript:;">手机、数码、通讯手机</a>
          <a href="javascript:;">Apple苹果</a>
          <a>iphone 6S系类</a>
        </div>
        <div class="mainCon">
          <div class="previewArea">
            <div class="preview">
              <!-- 中图区域 -->
              <div class="smallArea">
                <img src="./images/m1.png" alt="" />
                <!-- 遮罩层、蒙版区域 -->
                <div class="mask"></div>
              </div>
              <!-- 大图区域 -->
              <div class="bigArea">
                <img src="./images/l1.png" alt="" />
              </div>
            </div>
            <div class="prescroll">
              <div class="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img src="./images/s1.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s2.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s3.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s1.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s2.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s3.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s1.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s2.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s3.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s1.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s2.png" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="./images/s3.png" alt="" />
                  </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
              <!-- <p class="left">&lt;</p>
              <div class="listOut">
                <ul class="list">
                  <li><img src="./images/s1.png" alt="" /></li>
                  <li><img src="./images/s2.png" alt="" /></li>
                  <li><img src="./images/s3.png" alt="" /></li>
                  <li><img src="./images/s1.png" alt="" /></li>
                  <li><img src="./images/s2.png" alt="" /></li>
                  <li><img src="./images/s3.png" alt="" /></li>
                  <li><img src="./images/s1.png" alt="" /></li>
                  <li><img src="./images/s2.png" alt="" /></li>
                  <li><img src="./images/s3.png" alt="" /></li>
                  <li><img src="./images/s1.png" alt="" /></li>
                  <li><img src="./images/s2.png" alt="" /></li>
                  <li><img src="./images/s3.png" alt="" /></li>
                </ul>
              </div>
              <p class="right">&gt;</p> -->
            </div>
          </div>
          <div class="detailArea">
            <!-- 商品详情 -->
            <div class="priceArea">
              <!-- 内容由标签字符串生成 -->
            </div>
            <div class="chooseInsert"></div>
            <!-- 销售属性 -->
            <div class="chooseArea">
              <!-- <dl>
                <dt>选择颜色</dt>
                <dd>金色</dd>
                <dd>银色</dd>
                <dd>黑色</dd>
              </dl>
              <dl>
                <dt>内存容量</dt>
                <dd>16G</dd>
                <dd>32G</dd>
                <dd>64G</dd>
                <dd>128G</dd>
              </dl>
              <dl>
                <dt>选择版本</dt>
                <dd>公开版</dd>
                <dd>移动版</dd>
              </dl>
              <dl>
                <dt>选择优惠</dt>
                <dd>官方标配</dd>
                <dd>移动优惠版</dd>
                <dd>电信优惠版</dd>
              </dl> -->
            </div>
            <div class="goodsNum">
              <div class="num">
                <input type="text" value="1" readonly />
                <button class="plus">+</button>
                <button class="mins">-</button>
              </div>
              <div class="addCart">加入购物车</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 商品详情展示页 -->
      <div class="productDetial">
        <aside class="aside">
          <div class="tabTitle">
            <h4 class="active">相关分类</h4>
            <h4>推荐品牌</h4>
          </div>
          <div class="tabContent">
            <div class="tab-pane active">
              <ul class="partList">
                <li><a href="javascript:;"> 手机</a></li>
                <li><a href="javascript:;">手机壳</a></li>
                <li><a href="javascript:;">内存卡</a></li>
                <li><a href="javascript:;">Iphone配件</a></li>
                <li><a href="javascript:;">贴膜</a></li>
                <li><a href="javascript:;">手机耳机</a></li>
                <li><a href="javascript:;">移动电源</a></li>
                <li><a href="javascript:;">平板电脑</a></li>
              </ul>
              <ul class="goodList">
                <li>
                  <div class="detailImg">
                    <img src="./images/part01.png" alt="" />
                  </div>
                  <h4>Apple苹果iPhone 6s (A1699)</h4>
                  <p>¥6088.00</p>
                  <div class="addCart"><a href="">加入购物车</a></div>
                </li>
                <li>
                  <div class="detailImg">
                    <img src="./images/part01.png" alt="" />
                  </div>
                  <h4>Apple苹果iPhone 6s (A1699)</h4>
                  <p>¥6088.00</p>
                  <div class="addCart"><a href="">加入购物车</a></div>
                </li>
                <li>
                  <div class="detailImg">
                    <img src="./images/part01.png" alt="" />
                  </div>
                  <h4>Apple苹果iPhone 6s (A1699)</h4>
                  <p>¥6088.00</p>
                  <div class="addCart"><a href="">加入购物车</a></div>
                </li>
                <li>
                  <div class="detailImg">
                    <img src="./images/part01.png" alt="" />
                  </div>
                  <h4>Apple苹果iPhone 6s (A1699)</h4>
                  <p>¥6088.00</p>
                  <div class="addCart"><a href="">加入购物车</a></div>
                </li>
              </ul>
            </div>
            <div class="tab-pane">推荐品牌</div>
          </div>
        </aside>
        <div class="detail">
          <div class="fitting">
            <h4 class="kt">选择搭配</h4>
            <div class="good-suits">
              <div class="master">
                <img src="./images/l-m01.png" alt="" />
                <p>¥5299</p>
                <i>+</i>
              </div>
              <ul class="suits">
                <li class="suitsItem">
                  <img src="./images/dp01.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp02.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="50" />
                    <span>50</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp03.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="59" />
                    <span>59</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="./images/dp04.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="99" />
                    <span>99</span>
                  </label>
                </li>
              </ul>
              <div class="result">
                <div class="num">已选购0件商品</div>
                <p class="price-tit">套餐价</p>
                <p class="price">¥5299</p>
                <button class="addShopcar">加入购物车</button>
              </div>
            </div>
          </div>
          <div class="intro">
            <ul class="tab-wraped">
              <li class="active">
                <a href="###">商品介绍</a>
              </li>
              <li class="">
                <a href="###">规格与包装</a>
              </li>
              <li class="">
                <a href="###">售后保障</a>
              </li>
              <li class="">
                <a href="###">商品评价</a>
              </li>
              <li class="">
                <a href="###">手机社区</a>
              </li>
            </ul>
            <div class="tab-content">
              <div id="one" class="tab-pane active">
                <ul class="goods-intro">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品产地：中国大陆</li>
                  <li>商品毛重：0.51kg</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                  <li>系统：苹果（IOS）</li>
                  <li>像素：1000-1600万品毛重：0.51kg</li>
                  <li>机身内存：64GB</li>
                </ul>
                <div class="intro-detail">
                  <img src="./images/intro01.png" alt="" />
                  <img src="./images/intro02.png" alt="" />
                  <img src="./images/intro03.png" alt="" />
                </div>
              </div>
              <div id="two" class="tab-pane">规格与包装</div>
              <div id="three" class="tab-pane">售后保障</div>
              <div id="four" class="tab-pane">商品评价</div>
              <div id="five" class="tab-pane">手机社区</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>

    <!-- <script>
      function fn1() {
        debugger;
        var a = 1;
        var b = 2;
        // function fn2() {
        //   console.log(a);
        // }
        var fn2 = function () {
          console.log(a);
        };
        console.log(fn2);
      }
      fn1();
    </script> -->
  </body>
</html>
